<style>
    .nav li, .commodity-bar {
        cursor: pointer;
    }

    .commodity-tbody td, .commodity-thead th {
        vertical-align: middle !important;
        text-align: center;
    }

    img.index_img_url {
        width: 50px;
    }
    .cb-acive{
        background: #666666 !important;
        color: #ffffff;
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
<main id="commodity" class="commodity">
    <nav id="commodity_nav" class="commodity_nav">
        <ul class="nav nav-pills ">
            <li role="presentation" class="active"><a href="{{asset($nav['one']['url'])}}">{{$nav['one']['name']}}</a>
            </li>
            <li role="presentation"><a href="{{asset($nav['two']['url'])}}">{{$nav['two']['name']}}</a></li>
            <li role="presentation"><a href="{{asset($nav['three']['url'])}}">{{$nav['three']['name']}}</a></li>
        </ul>
    </nav>
    <ul class="nav nav-pills" id="parent_nav">
        @foreach($classify as $key => $val)
            <li role="presentation" data-parent-id="{{$val['commodity_classify_id']}}"><a>{{$val['classify_name']}}</a>
            </li>
        @endforeach
    </ul>
    <ul class="nav nav-pills" id="children_nav">
        @foreach(reset($classify)['data'] as $key => $val)
            <li role="presentation" data-parent-id="{{$val['commodity_classify_id']}}"><a>{{$val['classify_name']}}</a>
            </li>
        @endforeach
    </ul>
    <div class="row">
        <div class="col-md-3">
            <table class="table  table-striped commodity-table" id="commodity_list">
                <thead class="commodity-thead">
                <th>品名</th>
                </thead>
                <tbody class="commodity-tbody">
                </tbody>
            </table>
        </div>
        <div class="col-md-9" id="commodity-color" data-commodity-id="">
            <h5 for="" class="col-md-12">颜色管理</h5>

            <div class="form-inline commodity-form">
                <div class="form-group">
                    <label class="sr-only" for="inputColor">Amount (in dollars)</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="inputColor" placeholder="黑色">
                    </div>
                </div>
                <button class="btn btn-primary c-color-add">添加</button>
            </div>
            <div class="commodity-color-list">
            </div>
        </div>
    </div>
</main>
<script>
    var classify = {}
    var commodity = {}
    var token = $('meta[name="csrf-token"]').attr('content')
    $("#commodity-color").on('click', '.c-color-add', function () {
        if ($('#commodity-color').attr('data-commodity-id') == ('' || undefined || 0))
            return false
        if ($('#inputColor').val() != '') {
            $.post('/admin/commodity/api_color/add_color', {
                _token: token,
                name: $('#inputColor').val(),
                commodity_id: $('#commodity-color').attr('data-commodity-id')
            }, function (data) {
                if (data.errorCode == 0) {
                    color_load(data.data)
                }else {
                    $('.commodity-color-list').html('');
                }
            }, 'json')
        }
    })
    $('#commodity_list').on('click', '.commodity-bar', function () {
        if ($(this).attr('data-commodity-id') == ('' || undefined || 0))
            return false
        $('.commodity-bar').attr('class','commodity-bar')
        $(this).attr('class','commodity-bar cb-acive')
        $('#commodity-color').attr('data-commodity-id', $(this).attr('data-commodity-id'))
        $.post('/admin/commodity/api_color/get_color', {
            _token: token,
            commodity_id: $('#commodity-color').attr('data-commodity-id')
        }, function (data) {
            if (data.errorCode == 0) {
                color_load(data.data)
            }else {
                $('.commodity-color-list').html('');
            }
        }, 'json')
    })
    function color_load(data) {
        let html = ''
        for(k in data){
            html+='<button class="btn btn-default" data-color-id="'+data[k].commodity_color_id+'">'+data[k].commodity_color_name+'</button>'
        }
        $('.commodity-color-list').html(html)
    }
    $.post('/admin/commodity/api_classify/get_all_classify', {
        _token: token,
    }, function (data) {
        if (data.errorCode == 0) {
            classify = data.data
            $('#parent_nav li').eq(0).click()
        }
    })
    $('#parent_nav').on('click', 'li', function () {
        var th = $(this)
        $('#parent_nav li').attr('class', '')
        th.attr('class', 'active')
        children_nav_load(classify[th.attr('data-parent-id')].data)
    })

    function children_nav_load(data) {
        let html = ''
        for (k in data) {
            html += '<li role="presentation" data-parent-id="' + data[k].commodity_classify_id + '"><a>' + data[k].classify_name + '</a></li>'
        }
        $('#children_nav').html(html)
        $('#children_nav li').eq(0).click()
    }

    $('#children_nav').on('click', 'li', function () {
        var th = $(this)
        $('#children_nav li').attr('class', '')
        th.attr('class', 'active')
        $.post('/admin/commodity/api_commodity/get_children_commodity', {
            _token: token,
            classify: th.attr('data-parent-id')
        }, function (data) {
            if (data.errorCode == 0) {
                commodity = data.data
                commodity_load(commodity)
            } else {
                $('.commodity-tbody').html('')
            }
        })
    })

    function commodity_load(data) {
        let html = ''
        for (k in data) {
            html += '<tr class="commodity-bar" data-commodity-id="' + data[k].commodity_id + '">\n' +
                '            <td>' + data[k].commodity_name + '</td>\n' +
                '        </tr>'
        }
        $('.commodity-tbody').html(html)
        $('.commodity-bar').eq(0).click()
    }
</script>